<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文明四川 · 志愿服务平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .hero-bg {
                background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/id/1036/1920/1080');
                background-size: cover;
                background-position: center;
            }
            .nav-bar {
                background-color: rgba(255, 255, 255, 0.95);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                transition: all 0.3s;
            }
            .page-container {
                min-height: calc(100vh - 180px);
            }
            .section-title {
                position: relative;
                padding-bottom: 1.5rem;
            }
            .section-title::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 4px;
                background: #C41E3A;
                border-radius: 2px;
            }
        }
    </style>
</head>
<body class="font-sans text-gray-800 bg-gray-50">
<div id="app">
    <!-- 导航栏 -->
    <header class="nav-bar fixed w-full z-50 py-4 px-6 md:px-10">
        <div class="container mx-auto flex items-center justify-between">
            <!-- Logo 和 后台管理入口按钮 -->
            <div class="flex items-center">
                <img src="src/assets/images/logo.png" alt="Logo" class="h-12 w-auto">
                <!-- 修改开始：将 router-link 替换为 button -->
                <!-- 点击按钮跳转到后台登录页面 login.html -->
                <button
                        class="text-xl font-bold ml-3 text-red-700 hover:text-red-800 cursor-pointer"
                        onclick="window.location.href='src/pages/login.html';"
                >
                    登录/注册
                </button>
                <!-- 修改结束 -->
            </div>
            <nav class="hidden md:flex items-center space-x-8">
                <router-link to="/civilized" :class="{'text-red-700': activePage === 'civilized'}"
                             class="font-medium hover:text-red-700">
                    文明四川
                </router-link>

                <div class="group relative">
                    <router-link to="/volunteer" :class="{'text-red-700': activePage === 'volunteer'}"
                                 class="font-medium hover:text-red-700">
                        四川志愿者网 <i class="fa fa-caret-down text-xs"></i>
                    </router-link>
                    <div class="absolute left-0 mt-1 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 border border-gray-100 z-50">
                        <router-link to="/volunteer/project" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">项目介绍</router-link>
                        <router-link to="/volunteer/news" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">新闻专栏</router-link>
                        <router-link to="/volunteer/videos" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">宣传视频</router-link>
                        <router-link to="/volunteer/activities" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">专题活动</router-link>
                    </div>
                </div>

                <div class="group relative">
                    <router-link to="/hotline" :class="{'text-red-700': activePage === 'hotline'}"
                                 class="font-medium hover:text-red-700">
                        雷锋热线 <i class="fa fa-caret-down text-xs"></i>
                    </router-link>
                    <div class="absolute left-0 mt-1 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 border border-gray-100 z-50">
                        <router-link to="/hotline/project" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">项目介绍</router-link>
                        <router-link to="/hotline/news" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">新闻专栏</router-link>
                        <router-link to="/hotline/request-help" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">我要求助</router-link>
                        <router-link to="/hotline/provide-help" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">我要帮扶</router-link>
                        <router-link to="/hotline/brand" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">品牌活动</router-link>
                        <router-link to="/hotline/videos" class="block px-4 py-2 text-gray-800 hover:bg-red-700 hover:text-white">宣传视频</router-link>
                    </div>
                </div>

                <router-link to="/welfare-activity" :class="{'text-red-700': activePage === 'welfare-activity'}" class="font-medium hover:text-red-700">公益活动</router-link>
                <router-link to="/welfare-ad" :class="{'text-red-700': activePage === 'welfare-ad'}" class="font-medium hover:text-red-700">公益广告</router-link>
            </nav>

            <div class="flex items-center space-x-4">
                <a href="#" class="text-gray-800 hover:text-red-700">
                    <i class="fa fa-search"></i>
                </a>
                <button class="md:hidden text-gray-800">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 页面内容 -->
    <main class="pt-20 page-container">
        <div class="container mx-auto px-4 py-10">
            <!-- 路由占位符 -->
            <component :is="currentComponent"></component>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">文明四川志愿服务平台致力于推动四川省精神文明建设，搭建志愿者服务桥梁，传承雷锋精神。</p>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><router-link to="/civilized" class="hover:text-red-500">文明四川</router-link></li>
                        <li><router-link to="/volunteer" class="hover:text-red-500">四川志愿者网</router-link></li>
                        <li><router-link to="/hotline" class="hover:text-red-500">雷锋热线</router-link></li>
                        <li><router-link to="/welfare-activity" class="hover:text-red-500">公益活动</router-link></li>
                        <li><router-link to="/welfare-ad" class="hover:text-red-500">公益广告</router-link></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">联系方式</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center"><i class="fa fa-map-marker mr-2"></i> 成都理工大学</li>
                        <li class="flex items-center"><i class="fa fa-phone mr-2"></i> 028-12345678</li>
                        <li class="flex items-center"><i class="fa fa-envelope mr-2"></i> contact@scwm.org</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-700">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-700">
                            <i class="fa fa-mixins"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-700">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500">
                © 2025 文明四川志愿服务平台. All Rights Reserved.
            </div>
        </div>
    </footer>
</div>



<!-- HomeComponent部分 -->
<script>
    const HomeComponent = {
        data() {
            return {
                currentIndex: 0,
                slides: [
                    {
                        id: 1,
                        title: "文明四川 志愿同行",
                        subtitle: "共建美好家园，共享文明成果，一起为四川的文明建设贡献力量",
                        image: "https://picsum.photos/id/1036/1920/1080"
                    },
                    {
                        id: 2,
                        title: "志愿服务 温暖人心",
                        subtitle: "奉献爱心，传递温暖，让四川因志愿服务而更美好",
                        image: "https://picsum.photos/id/1039/1920/1080"
                    },
                    {
                        id: 3,
                        title: "雷锋精神 永放光芒",
                        subtitle: "传承雷锋精神，共建文明社会，让志愿之花开遍巴蜀大地",
                        image: "https://picsum.photos/id/1043/1920/1080"
                    }
                ],
                interval: null
            };
        },
        methods: {
            nextSlide() {
                this.currentIndex = (this.currentIndex + 1) % this.slides.length;
            },
            prevSlide() {
                this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
            },
            goToSlide(index) {
                this.currentIndex = index;
            },
            startAutoPlay() {
                this.interval = setInterval(() => {
                    this.nextSlide();
                }, 10000);
            },
            stopAutoPlay() {
                clearInterval(this.interval);
            }
        },
        mounted() {
            this.startAutoPlay();
        },
        beforeDestroy() {
            this.stopAutoPlay();
        },
        template: `
          <section class="relative w-full h-screen overflow-hidden">
            <!-- 轮播图 -->
            <div class="relative w-full h-full">
              <div
                  v-for="(slide, index) in slides"
                  :key="slide.id"
                  class="absolute top-0 left-0 w-full h-full transition-opacity duration-1000"
                  :class="{'opacity-100 z-10': currentIndex === index, 'opacity-0 z-0': currentIndex !== index}"
              >
                <div
                    class="w-full h-full bg-cover bg-center"
                    :style="{ backgroundImage: 'url(' + slide.image + ')' }"
                ></div>

                <div class="absolute inset-0 bg-black/50 flex items-center justify-center text-center">
                  <div class="container max-w-4xl px-4">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight text-white text-shadow">
                      {{ slide.title }}
                    </h1>
                    <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-white text-shadow">
                      {{ slide.subtitle }}
                    </p>
                    <div class="flex flex-wrap justify-center gap-4">
                      <router-link to="/civilized" class="bg-red-700 hover:bg-red-800 text-white px-8 py-3 rounded-md font-medium">
                        了解最新动态
                      </router-link>
                      <router-link to="/volunteer" class="bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white border border-white/40 px-8 py-3 rounded-md font-medium">
                        加入志愿者
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 轮播指示器 -->
            <div class="absolute bottom-8 left-0 right-0 z-20 flex justify-center space-x-2">
              <button
                  v-for="(slide, index) in slides"
                  :key="index"
                  @click="goToSlide(index)"
                  class="w-3 h-3 rounded-full transition-colors"
                  :class="{'bg-white': currentIndex === index, 'bg-white/50': currentIndex !== index}"
              ></button>
            </div>

            <!-- 轮播导航按钮 -->
            <button
                @click="prevSlide"
                @mouseenter="stopAutoPlay"
                @mouseleave="startAutoPlay"
                class="absolute left-4 top-1/2 transform -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/30 hover:bg-white/50 backdrop-blur-sm flex items-center justify-center text-white text-2xl"
            >
              <i class="fa fa-chevron-left"></i>
            </button>
            <button
                @click="nextSlide"
                @mouseenter="stopAutoPlay"
                @mouseleave="startAutoPlay"
                class="absolute right-4 top-1/2 transform -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/30 hover:bg-white/50 backdrop-blur-sm flex items-center justify-center text-white text-2xl"
            >
              <i class="fa fa-chevron-right"></i>
            </button>
          </section>
        `
    };

    // 文明四川页面组件
    const CivilizedSichuan = {
        data() {
            return {
                news: [
                    { id: 1, title: "四川省开展'文明城市共建'主题志愿服务活动", date: "2023-06-15", views: 1258, category: "文明创建", image: "https://picsum.photos/id/1059/600/400" },
                    { id: 2, title: "2023年四川省道德模范表彰大会在成都举行", date: "2023-06-10", views: 2365, category: "表彰大会", image: "https://picsum.photos/id/1060/600/400" },
                    { id: 3, title: "《四川省文明城市创建三年行动计划》发布", date: "2023-06-05", views: 3120, category: "政策发布", image: "https://picsum.photos/id/1061/600/400" },
                ],
                videos: [
                    { id: 1, title: "四川志愿者：用爱心温暖每个角落", duration: "05:32", date: "2025-06-01", image: "https://picsum.photos/id/1066/600/400" },
                    { id: 2, title: "雷锋热线：连接爱心 传递温暖", duration: "08:45", date: "2025-05-28", image: "https://picsum.photos/id/1067/600/400" },
                    { id: 3, title: "文明创建在行动", duration: "12:15", date: "2025-05-20", image: "https://picsum.photos/id/1068/600/400" },
                ],
                activeVideo: 1,
            };
        },
        methods: {
            // 主视频控制
            playMainVideo() {
                const video = this.$refs.mainVideoPlayer;
                if (video) video.play();
            },
            pauseMainVideo() {
                const video = this.$refs.mainVideoPlayer;
                if (video) video.pause();
            },
            fastForward(seconds) {
                const video = this.$refs.mainVideoPlayer;
                if (video) video.currentTime += seconds;
            },
            // 列表视频控制
            playListVideo(id) {
                const video = this.$refs[`videoPlayer_${id}`][0];
                if (video) video.play();
            },
            pauseListVideo(id) {
                const video = this.$refs[`videoPlayer_${id}`][0];
                if (video) video.pause();
            }
        },
        template: `
          <div>
            <div class="text-center mb-16">
              <h2 class="section-title text-3xl font-bold mb-4">文明四川 · 最新动态</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">了解文明四川创建相关的最新资讯，关注四川精神文明建设的最新进展</p>
            </div>

            <!-- 新闻资讯部分 -->
            <div class="mb-20">
              <div class="flex flex-col md:flex-row justify-between mb-10">
                <h3 class="text-2xl font-bold mb-6 md:mb-0">新闻资讯</h3>
                <div class="flex items-center">
                  <span class="text-gray-600 mr-2">排序方式:</span>
                  <select class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500/50">
                    <option>最新发布</option>
                    <option>热门阅读</option>
                    <option>按类别</option>
                  </select>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div v-for="item in news" :key="item.id" class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
                  <div class="relative">
                    <img :src="item.image" :alt="item.title" class="w-full h-56 object-cover">
                  </div>
                  <div class="p-6">
                    <div class="flex items-center text-gray-500 text-sm mb-3">
                      <span><i class="fa fa-calendar-o mr-1"></i> {{ item.date }}</span>
                      <span class="mx-3">|</span>
                      <span><i class="fa fa-eye mr-1"></i> {{ item.views }}</span>
                      <span class="mx-3">|</span>
                      <span>{{ item.category }}</span>
                    </div>
                    <h3 class="text-xl font-bold mb-3 hover:text-red-700 transition-colors">
                      {{ item.title }}
                    </h3>
                    <a href="#" class="inline-flex items-center text-red-700 font-medium hover:underline">
                      阅读全文 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                  </div>
                </div>
              </div>

              <div class="text-center mt-12">
                <a
                    href="/api/news"
                    class="inline-block border-2 border-red-700 text-red-700 hover:bg-red-700 hover:text-white px-8 py-3 rounded-md font-medium transition-colors"
                >
                  查看更多新闻 <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
              </div>
            </div>

            <!-- 视频展示部分 -->
            <div>
              <h3 class="text-2xl font-bold mb-10">视频展播</h3>

              <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 主视频 -->
                <div class="lg:col-span-2">
                  <div class="bg-black rounded-lg overflow-hidden shadow-lg relative">
                    <video
                        ref="mainVideoPlayer"
                        :src="videos.find(v => v.id === activeVideo)?.src"
                        class="w-full aspect-video object-cover"
                        muted
                        @mouseenter="playMainVideo"
                        @mouseleave="pauseMainVideo"
                    ></video>
                    <div class="absolute inset-0 flex items-center justify-center">
                      <button class="w-20 h-20 rounded-full bg-red-700/80 text-white flex items-center justify-center">
                        <i class="fa fa-play text-3xl ml-1"></i>
                      </button>
                    </div>
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
                      <h3 class="text-white text-xl font-bold mb-2">{{ videos.find(v => v.id === activeVideo)?.title }}</h3>
                      <p class="text-white/80 text-sm">发布于 {{ videos.find(v => v.id === activeVideo)?.date }}</p>
                    </div>
                  </div>
                </div>

                <!-- 视频列表 -->
                <div class="space-y-4 max-h-screen overflow-y-auto scrollbar-hide">
                  <div v-for="video in videos" :key="video.id"
                       @click="activeVideo = video.id"
                       :class="{'ring-2 ring-red-700': activeVideo === video.id}"
                       class="flex bg-white rounded-lg overflow-hidden shadow-md cursor-pointer transition-all">
                    <div class="w-1/3 relative">
                      <video
                          :ref="'videoPlayer_' + video.id"
                          :src="video.src"
                          class="w-full h-full object-cover"
                          muted
                          @mouseenter="playListVideo(video.id)"
                          @mouseleave="pauseListVideo(video.id)"
                      ></video>
                      <div class="absolute inset-0 flex items-center justify-center">
                        <button class="w-10 h-10 rounded-full bg-red-700/80 text-white flex items-center justify-center">
                          <i class="fa fa-play text-sm ml-0.5"></i>
                        </button>
                      </div>
                    </div>
                    <div class="w-2/3 p-4">
                      <h4 class="font-medium text-gray-800 mb-1 line-clamp-2">{{ video.title }}</h4>
                      <div class="flex items-center text-gray-500 text-xs">
                        <span><i class="fa fa-clock-o mr-1"></i> {{ video.duration }}</span>
                        <span class="mx-2">|</span>
                        <span>{{ video.date }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="mt-10 flex justify-start">
                <div class="flex items-center space-x-4">
                  <!-- 上一个按钮 -->
                  <button
                      class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full"
                      @click="playPrevVideo"
                  >
                    <i class="fa fa-step-backward"></i>
                  </button>
                  <!-- 后退按钮 -->
                  <button
                      class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full"
                      @click="history.back()"
                  >
                    <i class="fa fa-backward"></i> <!-- 使用 Font Awesome 后退图标 -->
                  </button>
                  <!-- 暂停按钮 -->
                  <button
                      class="bg-red-700 text-white p-3 rounded-full"
                      @click="pauseMainVideo"
                  >
                    <i class="fa fa-pause"></i>
                  </button>
                  <!-- 快进按钮 -->
                  <button
                      class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full"
                      @click="fastForward(10)"
                  >
                    <i class="fa fa-forward"></i>
                  </button>

                  <!-- 下一个按钮 -->
                  <button
                      class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full"
                      @click="playNextVideo"
                  >
                    <i class="fa fa-step-forward"></i>
                  </button>

                  <!-- 随机播放按钮 -->
                  <button
                      class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full"
                      @click="playRandomVideo"
                  >
                    <i class="fa fa-random"></i>
                  </button>

                  <!-- 循环播放按钮 -->
                  <button
                      :class="{'bg-red-700 text-white': loopMode, 'bg-gray-200': !loopMode}"
                      class="hover:bg-gray-300 p-3 rounded-full"
                      @click="toggleLoopMode"
                  >
                    <i class="fa fa-repeat"></i>
                  </button>




                </div>
              </div>
              <div class="mt-10 flex justify-end">
                <div class="flex items-center space-x-4">
                  <a href="#" class="bg-red-700 text-white px-6 py-3 rounded-md font-medium hover:bg-red-800">
                    查看全部视频
                  </a>
                </div>
              </div>


            </div>
          </div>

        `
    };

    // 四川志愿者网组件
    const VolunteerSichuan = {
        props: ['page'],
        data() {
            return {
                currentTab: this.page || 'project',
                tabs: {
                    project: '项目介绍',
                    news: '新闻专栏',
                    videos: '宣传视频',
                    activities: '专题活动'
                }
            };
        },
        methods: {
            goToActivityDetail(activityId) {
                // 路由跳转逻辑
                this.$router.push({
                    name: 'ActivityDetail',
                    params: { id: activityId }
                });
            }
        },
        methods: {
            goToActivityDetail(activityId) {
                // 使用路由跳转到详情页
                this.$root.navigate(`/activity/${activityId}`);
            }
        },
        template: `
          <div>
            <div class="text-center mb-16">
              <h2 class="section-title text-3xl font-bold mb-4">四川志愿者网</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">加入我们，一起为四川的文明建设贡献力量，让爱心传递，让温暖延续</p>
            </div>

            <!-- 标签页导航 -->
            <div class="border-b border-gray-200 mb-8">
              <div class="flex flex-wrap gap-2 mb-6">
                <button v-for="(label, key) in tabs" :key="key"
                        @click="currentTab = key"
                        :class="{'bg-red-700 text-white': currentTab === key, 'text-gray-700 hover:bg-gray-100': currentTab !== key}"
                        class="px-6 py-3 rounded-md font-medium">
                  {{ label }}
                </button>
              </div>
            </div>

            <!-- 标签页内容 -->
            <div>
              <!-- 项目介绍 -->
              <div v-if="currentTab === 'project'" class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div>
                  <h3 class="text-2xl font-bold mb-6">关于四川志愿者网</h3>
                  <p class="text-gray-600 mb-4 leading-relaxed">
                    四川志愿者网是四川省精神文明建设委员会办公室主管的综合性志愿服务平台，旨在整合全省志愿服务资源，搭建志愿者、服务对象和服务项目之间的桥梁。
                  </p>
                  <p class="text-gray-600 mb-6 leading-relaxed">
                    平台自成立以来，已注册志愿者超过200万人，发布志愿服务项目5万余个，累计服务时长超过1亿小时，成为四川省志愿服务的重要力量。
                  </p>

                  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
                    <div class="text-center p-4 bg-gray-100 rounded-lg">
                      <div class="text-3xl font-bold text-red-700 mb-1">200万+</div>
                      <div class="text-gray-600 text-sm">注册志愿者</div>
                    </div>
                    <div class="text-center p-4 bg-gray-100 rounded-lg">
                      <div class="text-3xl font-bold text-red-700 mb-1">5万+</div>
                      <div class="text-gray-600 text-sm">服务项目</div>
                    </div>
                    <div class="text-center p-4 bg-gray-100 rounded-lg">
                      <div class="text-3xl font-bold text-red-700 mb-1">1亿+</div>
                      <div class="text-gray-600 text-sm">服务时长</div>
                    </div>
                    <div class="text-center p-4 bg-gray-100 rounded-lg">
                      <div class="text-3xl font-bold text-red-700 mb-1">21市州</div>
                      <div class="text-gray-600 text-sm">覆盖范围</div>
                    </div>
                  </div>

                  <a href="#" class="inline-block bg-red-700 hover:bg-red-800 text-white px-6 py-3 rounded-md font-medium">
                    了解更多 <i class="fa fa-arrow-right ml-2"></i>
                  </a>
                </div>

                <div class="relative">
                  <img src="https://picsum.photos/id/1070/800/600" alt="四川志愿者活动" class="w-full h-auto rounded-lg shadow-xl">
                  <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg max-w-xs">
                    <div class="flex items-center mb-3">
                      <img src="https://picsum.photos/id/1074/100/100" alt="志愿者代表" class="w-12 h-12 rounded-full object-cover">
                      <div class="ml-3">
                        <h4 class="font-bold text-gray-800">张晓明</h4>
                        <p class="text-gray-500 text-sm">志愿者 · 3年服务经历</p>
                      </div>
                    </div>
                    <p class="text-gray-600 text-sm italic">
                      "参与志愿服务不仅帮助了他人，也让我找到了人生的价值。每次看到受助者的笑容，都觉得一切付出都是值得的。"
                    </p>
                  </div>
                </div>
              </div>

              <!-- 专题活动 -->
              <div v-if="currentTab === 'activities'">
                <h3 class="text-2xl font-bold mb-8 text-center">志愿者专题活动</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                  <!-- 活动卡片1 -->
                  <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 card-hover">
                    <div class="relative">
                      <img src="https://picsum.photos/id/1071/600/400" alt="关爱老人活动" class="w-full h-48 object-cover">
                      <div class="absolute top-4 left-4 bg-red-700 text-white text-xs px-3 py-1 rounded-full">
                        进行中
                      </div>
                    </div>
                    <div class="p-5">
                      <div class="flex justify-between items-start mb-3">
                        <h4 class="font-bold text-lg">关爱空巢老人 温暖陪伴行动</h4>
                        <span class="text-gray-500 text-sm"><i class="fa fa-map-marker mr-1"></i> 全省</span>
                      </div>
                      <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        组织志愿者定期看望空巢老人，提供生活照料、情感陪伴、健康咨询等服务，让老人感受社会温暖。
                      </p>
                      <div class="flex justify-between items-center pt-3 border-t border-gray-100">
                        <div class="flex items-center text-gray-500 text-sm">
                          <span><i class="fa fa-calendar mr-1"></i> 长期开展</span>
                        </div>
                        <a href="#" class="text-red-700 text-sm font-medium hover:underline">
                          我要报名 <i class="fa fa-angle-right ml-1"></i>
                        </a>
                      </div>
                    </div>
                  </div>

                  <!-- 活动卡片2 -->
                  <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 card-hover">
                    <div class="relative">
                      <img src="https://picsum.photos/id/1072/600/400" alt="环保宣传活动" class="w-full h-48 object-cover">
                      <div class="absolute top-4 left-4 bg-yellow-600 text-white text-xs px-3 py-1 rounded-full">
                        即将开始
                      </div>
                    </div>
                    <div class="p-5">
                      <div class="flex justify-between items-start mb-3">
                        <h4 class="font-bold text-lg">绿色四川 环保先行宣传活动</h4>
                        <span class="text-gray-500 text-sm"><i class="fa fa-map-marker mr-1"></i> 成都市</span>
                      </div>
                      <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        在成都市各大公园、社区开展环保宣传活动，通过垃圾分类指导、环保知识讲座、清洁行动等形式，提升市民环保意识。
                      </p>
                      <div class="flex justify-between items-center pt-3 border-t border-gray-100">
                        <div class="flex items-center text-gray-500 text-sm">
                          <span><i class="fa fa-calendar mr-1"></i> 6月25日</span>
                        </div>
                        <a href="#" class="text-red-700 text-sm font-medium hover:underline">
                          我要报名 <i class="fa fa-angle-right ml-1"></i>
                        </a>
                      </div>
                    </div>
                  </div>

                  <!-- 活动卡片3 -->
                  <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 card-hover">
                    <div class="relative">
                      <img src="https://picsum.photos/id/1073/600/400" alt="乡村支教活动" class="w-full h-48 object-cover">
                      <div class="absolute top-4 left-4 bg-red-700 text-white text-xs px-3 py-1 rounded-full">
                        进行中
                      </div>
                    </div>
                    <div class="p-5">
                      <div class="flex justify-between items-start mb-3">
                        <h4 class="font-bold text-lg">"点亮希望"乡村支教计划</h4>
                        <span class="text-gray-500 text-sm"><i class="fa fa-map-marker mr-1"></i> 凉山州</span>
                      </div>
                      <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        组织优秀教师和大学生志愿者前往凉山州偏远乡村学校，开展为期1-3个月的支教活动，帮助改善当地教育条件。
                      </p>
                      <div class="flex justify-between items-center pt-3 border-t border-gray-100">
                        <div class="flex items-center text-gray-500 text-sm">
                          <span><i class="fa fa-user-o mr-1"></i> 已报名: 56人</span>
                        </div>
                        <button
                            @click="goToActivityDetail(activityId)"
                            class="text-red-700 text-sm font-medium hover:underline focus:outline-none"
                        >
                          我要报名 <i class="fa fa-angle-right ml-1"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flex justify-center"> <!-- Flex 容器 -->
                  <a href="#" class="inline-block bg-red-700 hover:bg-red-800 text-white px-6 py-3 rounded-md font-medium">
                    了解更多 <i class="fa fa-arrow-right ml-2"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        `
    };

    // 雷锋热线组件
    const LeiFengHotline = {
        props: ['page'],
        data() {
            return {
                currentTab: this.page || 'project',
                tabs: {
                    project: '项目介绍',
                    news: '新闻专栏',
                    'request-help': '我要求助',
                    'provide-help': '我要帮扶',
                    brand: '品牌活动',
                    videos: '宣传视频'
                },
                helpForm: {
                    name: '',
                    phone: '',
                    location: '',
                    content: ''
                },
                helpRequests: [
                    {
                        id: 1,
                        title: "寻找走失老人",
                        category: "紧急",
                        categoryColor: "bg-red-600",
                        description: "李大爷，78岁，于6月12日在成都市锦江区走失，身高约1.7米，穿蓝色中山装，患有轻度老年痴呆...",
                        time: "发布于 2小时前"
                    },
                    {
                        id: 2,
                        title: "残疾人轮椅捐赠",
                        category: "普通",
                        categoryColor: "bg-gray-600",
                        description: "家中有一位行动不便的残疾人，需要一辆轮椅，但家庭经济困难无力购买，希望能得到社会爱心人士的帮助...",
                        time: "发布于 1天前"
                    },
                    {
                        id: 3,
                        title: "乡村小学图书捐赠",
                        category: "普通",
                        categoryColor: "bg-gray-600",
                        description: "我们是凉山州某乡村小学，学校图书资源匮乏，希望能得到适合小学生阅读的各类图书捐赠，丰富孩子们的课余生活...",
                        time: "发布于 3天前"
                    }
                ]
            };
        },
        methods: {
            submitHelpForm() {
                alert('求助信息已提交！雷锋热线工作人员会尽快与您联系。');
                this.helpForm = { name: '', phone: '', location: '', content: '' };
            }
        },
        template: `
          <div>
            <div class="text-center mb-16">
              <h2 class="section-title text-3xl font-bold mb-4">雷锋热线</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">有困难请找雷锋热线，想助人也请找雷锋热线，我们搭建爱心桥梁，传递社会温暖</p>
            </div>

            <!-- 标签页导航 -->
            <div class="border-b border-gray-200 mb-8">
              <div class="flex flex-wrap gap-2 mb-6">
                <button v-for="(label, key) in tabs" :key="key"
                        @click="currentTab = key"
                        :class="{'bg-red-700 text-white': currentTab === key, 'text-gray-700 hover:bg-gray-100': currentTab !== key}"
                        class="px-6 py-3 rounded-md font-medium">
                  {{ label }}
                </button>
              </div>
            </div>

            <!-- 标签页内容 -->
            <div>
              <!-- 项目介绍 -->
              <div v-if="currentTab === 'project'" class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div>
                  <h3 class="text-2xl font-bold mb-6">关于雷锋热线</h3>
                  <p class="text-gray-600 mb-6 leading-relaxed">
                    雷锋热线是四川省精神文明建设的重要品牌，旨在弘扬雷锋精神，搭建互助平台，为有需要的人提供帮助，为愿意助人的人提供渠道。
                  </p>
                  <p class="text-gray-600 mb-8 leading-relaxed">
                    自开通以来，雷锋热线已帮助群众解决各类困难超过10万件，组织开展各类志愿服务活动5000余场，成为连接爱心、传递温暖的重要纽带。
                  </p>

                  <div class="flex flex-wrap gap-4">
                    <a href="#" class="bg-red-700 hover:bg-red-800 text-white px-6 py-3 rounded-md font-medium">
                      我要求助 <i class="fa fa-hand-paper-o ml-2"></i>
                    </a>
                    <a href="#" class="bg-white border-2 border-red-700 text-red-700 hover:bg-red-50 px-6 py-3 rounded-md font-medium">
                      我要帮扶 <i class="fa fa-heart ml-2"></i>
                    </a>
                  </div>
                </div>

                <div class="bg-white p-8 rounded-lg shadow-lg">
                  <h4 class="text-xl font-bold mb-6 text-center">热门求助信息</h4>

                  <div class="space-y-6">
                    <div v-for="request in helpRequests" :key="request.id" class="bg-gray-100 p-4 rounded-lg">
                      <div class="flex justify-between items-start mb-2">
                        <h5 class="font-bold">{{ request.title }}</h5>
                        <span :class="[request.categoryColor, 'text-white text-xs px-2 py-1 rounded']">{{ request.category }}</span>
                      </div>
                      <p class="text-gray-600 text-sm mb-3">
                        {{ request.description }}
                      </p>
                      <div class="flex justify-between items-center">
                        <span class="text-gray-500 text-xs"><i class="fa fa-clock-o mr-1"></i> {{ request.time }}</span>
                        <a href="#" class="text-red-700 text-sm hover:underline">我能帮忙</a>
                      </div>
                    </div>
                  </div>

                  <div class="text-center mt-6">
                    <a href="#" class="inline-block text-red-700 border border-red-300 hover:bg-red-50 px-4 py-2 rounded-md text-sm">
                      查看更多求助信息
                    </a>
                  </div>
                </div>
              </div>

              <!-- 我要求助 -->
              <div v-if="currentTab === 'request-help'" class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md">
                <h3 class="text-2xl font-bold mb-6">填写求助信息</h3>
                <form @submit.prevent="submitHelpForm">
                  <div class="mb-6">
                    <label class="block text-gray-700 mb-2" for="name">姓名</label>
                    <input type="text" id="name" v-model="helpForm.name"
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                  </div>

                  <div class="mb-6">
                    <label class="block text-gray-700 mb-2" for="phone">联系电话</label>
                    <input type="tel" id="phone" v-model="helpForm.phone"
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                  </div>

                  <div class="mb-6">
                    <label class="block text-gray-700 mb-2" for="location">所在地区</label>
                    <input type="text" id="location" v-model="helpForm.location"
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                  </div>

                  <div class="mb-6">
                    <label class="block text-gray-700 mb-2" for="content">求助内容</label>
                    <textarea id="content" v-model="helpForm.content" rows="5"
                              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"></textarea>
                  </div>

                  <div class="flex justify-center">
                    <button type="submit" class="bg-red-700 hover:bg-red-800 text-white px-8 py-3 rounded-md font-medium">
                      提交求助信息
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        `
    };

    // 公益广告组件
    const PublicWelfareAd = {
        data() {
            return {
                currentTab: 'all',
                tabs: {
                    all: '图说我们的价值观',
                },
                ads: [
                    {
                        id: 1,
                        title: "富强",
                        type: "image",
                        description: "国家经济强大、人民富裕，是实现民族复兴的物质基础",
                        image: "https://picsum.photos/id/1080/600/400",
                        //date: "2025-06-10",
                        views: 2450
                    },
                    {
                        id: 2,
                        title: "民主",
                        type: "image",
                        description: "人民当家作主，是社会主义政治生活的核心保障",
                        image: "https://picsum.photos/id/1079/600/400",
                        //date: "2025-06-05",
                        views: 3120
                    },
                    {
                        id: 3,
                        title: "文明",
                        type: "image",
                        description: "社会进步与文化繁荣的标志，体现民族精神与现代发展的统一",
                        image: "https://picsum.photos/id/1078/600/400",
                        //date: "2025-05-28",
                        views: 5678
                    },
                    {
                        id: 4,
                        title: "和谐",
                        type: "image",
                        description: "社会各要素协调共处，追求民生保障与稳定发展",
                        image: "https://picsum.photos/id/1077/600/400",
                        //date: "2025-05-20",
                        views: 4321
                    },
                    {
                        id: 5,
                        title: "自由",
                        type: "image",
                        description: "保障人的意志与发展权利，是马克思主义的社会理想",
                        image: "https://picsum.photos/id/1076/600/400",
                        //date: "2025-05-15",
                        views: 3987
                    },
                    {
                        id: 6,
                        title: "平等",
                        type: "image",
                        description: "公民法律地位和机会的实质平等，强调人权尊重",
                        image: "https://picsum.photos/id/1075/600/400",
                        //date: "2025-05-10",
                        views: 5123
                    },
                    {
                        id: 7,
                        title: "公正",
                        type: "image",
                        description: "社会公平与正义，以保障人民根本利益为出发点",
                        image: "https://picsum.photos/id/1074/600/400",
                        //date: "2025-05-10",
                        views: 5123
                    },
                    {
                        id: 8,
                        title: "法治",
                        type: "image",
                        description: "依法治国，通过制度维护自由平等与社会秩序",
                        image: "https://picsum.photos/id/1073/600/400",
                        //date: "2025-05-10",
                        views: 5123
                    },
                    {
                        id: 9,
                        title: "爱国",
                        type: "image",
                        description: "对祖国的忠诚与奉献，以振兴中华为使命",
                        image: "https://picsum.photos/id/1072/600/400",
                        //date: "2025-05-10",
                        views: 5123
                    },
                    {
                        id: 10,
                        title: "敬业",
                        type: "image",
                        description: "恪尽职守、服务社会的职业精神",
                        image: "https://picsum.photos/id/1071/600/400",
                        //date: "2025-05-10",
                        views: 5123
                    },
                    {
                        id: 11,
                        title: "诚信",
                        type: "image",
                        description: "诚实守信，传承道德传统并构建社会信任",
                        image: "https://picsum.photos/id/1070/600/400",
                        //date: "2025-05-10",
                        views: 5123
                    },
                    {
                        id: 12,
                        title: "友善",
                        type: "image",
                        description: "公民间互助尊重,形成新型人际关系",
                        image: "https://picsum.photos/id/1069/600/400",
                        //date: "2025-05-10",
                        views: 5123
                    },

                ]
            };
        },
        computed: {
            filteredAds() {
                if (this.currentTab === 'all') return this.ads;
                return this.ads.filter(ad => ad.type === this.currentTab);
            }
        },
        template: `
          <div>
            <div class="text-center mb-16">
              <h2 class="section-title text-3xl font-bold mb-4">图说我们的价值观</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">传播正能量，弘扬社会主义核心价值观，让公益广告成为文明建设的重要力量</p>
            </div>

            <!-- 标签页导航 -->
            <div class="border-b border-gray-200 mb-8">
              <div class="flex flex-wrap gap-2 mb-6">
                <button v-for="(label, key) in tabs" :key="key"
                        @click="currentTab = key"
                        :class="{'bg-red-700 text-white': currentTab === key, 'text-gray-700 hover:bg-gray-100': currentTab !== key}"
                        class="px-6 py-3 rounded-md font-medium">
                  {{ label }}
                </button>
              </div>
            </div>

            <!-- 价值观内容 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div v-for="ad in filteredAds" :key="ad.id" class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
                <div class="relative">
                  <img :src="ad.image" :alt="ad.title" class="w-full h-56 object-cover">
                  <div class="absolute top-4 left-4 bg-red-700 text-white text-xs px-3 py-1 rounded-full">
                    {{ tabs[ad.type] }}
                  </div>
                  <div v-if="ad.type === 'video'" class="absolute inset-0 flex items-center justify-center">
                    <button class="w-16 h-16 rounded-full bg-red-700/80 text-white flex items-center justify-center">
                      <i class="fa fa-play text-xl ml-1"></i>
                    </button>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center text-gray-500 text-sm mb-3">
                    <span><i class="fa fa-calendar-o mr-1"></i> {{ ad.date }}</span>
                    <span class="mx-3">|</span>
                    <span><i class="fa fa-eye mr-1"></i> {{ ad.views }}</span>
                  </div>
                  <h3 class="text-xl font-bold mb-3 hover:text-red-700 transition-colors">
                    {{ ad.title }}
                  </h3>
                  <p class="text-gray-600 mb-4">
                    {{ ad.description }}
                  </p>

                </div>
              </div>
            </div>

            <div>
              <div class="text-center mb-16">
                <h2 class="section-title text-3xl font-bold mb-4">“讲文明 树新风”公益广告</h2>
                <p class="text-gray-600 max-w-2xl mx-auto"></p>
              </div>
              <!-- 公益广告内容 -->
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div v-for="ad in filteredAds" :key="ad.id" class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
                  <div class="p-6">
                    这是视频播放区域
                    <a href="#" class="inline-flex items-center text-red-700 font-medium hover:underline">
                      查看详情 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                  </div>
                </div>
              </div>

            <div class="text-center mt-12">
              <a href="#" class="inline-block border-2 border-red-700 text-red-700 hover:bg-red-700 hover:text-white px-8 py-3 rounded-md font-medium transition-colors">
                查看更多公益广告 <i class="fa fa-long-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
          </div>`
    };

    // 公益活动组件
    const PublicWelfareActivity = {
        data() {
            return {
                currentTab: 'upcoming',
                tabs: {
                    upcoming: '即将开始',
                    ongoing: '进行中',
                    past: '往期活动'
                },
                activities: [
                    // 原始活动数据（保持原样）
                    {
                        id: 1,
                        title: "爱心书屋捐赠活动",
                        status: "upcoming",
                        date: "2025-06-25",
                        location: "成都市青羊区",
                        description: "为贫困地区学校捐赠图书，建立爱心书屋，帮助孩子们拓展视野。",
                        image: "https://picsum.photos/id/1064/600/400",
                        participants: 56,
                        target: 100
                    },
                    {
                        id: 2,
                        title: "环保清洁行动",
                        status: "ongoing",
                        date: "2025-06-20 至 2025-07-20",
                        location: "全省范围",
                        description: "组织志愿者清理公共场所垃圾，宣传环保理念，共建美丽四川。",
                        image: "https://picsum.photos/id/1063/600/400",
                        participants: 234,
                        target: 500
                    },
                    {
                        id: 3,
                        title: "关爱留守儿童夏令营",
                        status: "upcoming",
                        date: "2025-07-10",
                        location: "凉山州昭觉县",
                        description: "为留守儿童举办暑期夏令营活动，提供学业辅导和心理关怀。",
                        image: "https://picsum.photos/id/1062/600/400",
                        participants: 32,
                        target: 50
                    },
                    {
                        id: 4,
                        title: "社区老人健康讲座",
                        status: "past",
                        date: "2025-06-15",
                        location: "成都市武侯区",
                        description: "邀请医疗专家为社区老人讲解健康养生知识，提供免费体检服务。",
                        image: "https://picsum.photos/id/1061/600/400",
                        participants: 78,
                        feedback: 4.8
                    },
                    {
                        id: 5,
                        title: "残疾人就业培训",
                        status: "ongoing",
                        date: "2025-06-01 至 2025-08-31",
                        location: "成都市成华区",
                        description: "为残疾人提供职业技能培训，帮助他们实现就业和自立。",
                        image: "https://picsum.photos/id/1060/600/400",
                        participants: 45,
                        target: 60
                    },
                    {
                        id: 6,
                        title: "无偿献血活动",
                        status: "past",
                        date: "2025-06-14",
                        location: "全省各献血点",
                        description: "世界献血者日特别活动，号召市民积极参与无偿献血，拯救生命。",
                        image: "https://picsum.photos/id/1059/600/400",
                        participants: 1024,
                        feedback: 4.9
                    },

                    // ============= 新增的三条新闻 =============
                    // 1. 即将开始状态新增：助农直播培训（参考网页2）
                    {
                        id: 7,
                        title: "电商助农直播培训",
                        status: "upcoming",
                        date: "2025-09-05",
                        location: "南部县柑橘种植基地",
                        description: "通过OMO培训模式教授农产品直播技巧，助力新农人拓展销售渠道，解决农产品滞销问题。",
                        image: "https://picsum.photos/id/1083/600/400",
                        participants: 89,
                        target: 120
                    },
                    // 2. 进行中状态新增：公园环保行动（参考网页4）
                    {
                        id: 8,
                        title: "桂溪公园生态守护",
                        status: "ongoing",
                        date: "2025-08-01 至 2025-08-31",
                        location: "成都桂溪生态公园",
                        description: "每日组织志愿者清理公园垃圾、整理共享单车，通过步数捐赠兑换环保物资支持城市绿肺保护。",
                        image: "https://picsum.photos/id/1078/600/400",
                        participants: 317,
                        target: 500
                    },
                    // 3. 往期活动新增：敬老院中秋慰问（参考网页8）
                    {
                        id: 9,
                        title: "中秋敬老暖心行",
                        status: "past",
                        date: "2025-08-15",
                        location: "延陵镇敬老院",
                        description: "组织志愿者为58名孤寡老人送月饼、表演节目、修剪指甲，让老人感受社会温暖。",
                        image: "https://picsum.photos/id/1069/600/400",
                        participants: 42,
                        feedback: 4.95
                    }
                ]
            };
        },
        computed: {
            filteredActivities() {
                return this.activities.filter(activity => activity.status === this.currentTab);
            }
        },
        methods: {
            joinActivity(activityId) {
                alert(`已成功报名参加活动！活动ID: ${activityId}`);
            }
        },
        template: `
          <div>
            <!-- 页面标题和描述（保持原样） -->
            <div class="text-center mb-16">
              <h2 class="section-title text-3xl font-bold mb-4">公益活动</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">参与公益活动，奉献爱心，传递温暖，共同建设美好社会</p>
            </div>

            <!-- 标签页导航（保持原样） -->
            <div class="border-b border-gray-200 mb-8">
              <div class="flex flex-wrap gap-2 mb-6">
                <button v-for="(label, key) in tabs" :key="key"
                        @click="currentTab = key"
                        :class="{'bg-red-700 text-white': currentTab === key, 'text-gray-700 hover:bg-gray-100': currentTab !== key}"
                        class="px-6 py-3 rounded-md font-medium">
                  {{ label }}
                </button>
              </div>
            </div>

            <!-- 活动内容展示（自动包含新增数据） -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div v-for="activity in filteredActivities" :key="activity.id" class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
                <!-- 卡片内容（保持原样结构） -->
                <div class="relative">
                  <img :src="activity.image" :alt="activity.title" class="w-full h-56 object-cover">
                  <div class="absolute top-4 left-4" :class="{
                'bg-red-700': activity.status === 'upcoming',
                'bg-green-600': activity.status === 'ongoing',
                'bg-gray-600': activity.status === 'past'
              }" class="text-white text-xs px-3 py-1 rounded-full">
                    {{ tabs[activity.status] }}
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center text-gray-500 text-sm mb-3">
                    <span><i class="fa fa-calendar-o mr-1"></i> {{ activity.date }}</span>
                    <span class="mx-3">|</span>
                    <span><i class="fa fa-map-marker mr-1"></i> {{ activity.location }}</span>
                  </div>
                  <h3 class="text-xl font-bold mb-3 hover:text-red-700 transition-colors">
                    {{ activity.title }}
                  </h3>
                  <p class="text-gray-600 mb-4">
                    {{ activity.description }}
                  </p>

                  <!-- 动态显示进度条或评分 -->
                  <div v-if="activity.status !== 'past'" class="mb-4">
                    <div class="flex justify-between items-center text-sm text-gray-600 mb-1">
                      <span>报名进度</span>
                      <span>{{ activity.participants }} / {{ activity.target }}人</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div class="bg-red-700 h-2 rounded-full" :style="{ width: (activity.participants / activity.target * 100) + '%' }"></div>
                    </div>
                  </div>
                  <div v-else class="mb-4 flex items-center text-yellow-500">
                    <i class="fa fa-star mr-1"></i>
                    <span>活动评分: {{ activity.feedback }}/5.0</span>
                  </div>

                  <!-- 动态按钮 -->
                  <button v-if="activity.status !== 'past'"
                          @click="joinActivity(activity.id)"
                          class="w-full bg-red-700 hover:bg-red-800 text-white py-2 rounded-md font-medium">
                    立即报名
                  </button>
                  <a v-else href="#" class="block text-center text-red-700 border border-red-300 hover:bg-red-50 py-2 rounded-md font-medium">
                    查看活动回顾
                  </a>
                </div>
              </div>
            </div>

            <!-- 底部按钮（保持原样） -->
            <div class="text-center mt-12">
              <a href="#" class="inline-block border-2 border-red-700 text-red-700 hover:bg-red-700 hover:text-white px-8 py-3 rounded-md font-medium transition-colors">
                查看更多公益活动 <i class="fa fa-long-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
        `
    };

    // 模拟路由
    const routes = {
        '/': HomeComponent,
        '/civilized': CivilizedSichuan,
        '/volunteer': VolunteerSichuan,
        '/hotline': LeiFengHotline,
        '/welfare-ad': PublicWelfareAd,
        '/welfare-activity': PublicWelfareActivity,
        '/hotline/request-help': LeiFengHotline,
        '/hotline/provide-help': { template: '<div>我要帮扶页面</div>' }
    };

    new Vue({
        el: '#app',
        data: {
            currentPath: '/',
            activePage: 'home'
        },
        computed: {
            currentComponent() {
                // 提取路径中的主要部分来激活正确的页面标签
                const pathParts = this.currentPath.split('/');
                this.activePage = pathParts[1] || 'home';

                // 特殊处理子页面的激活状态
                if (pathParts[1] === 'volunteer' && pathParts[2]) {
                    const volunteerPages = {
                        'project': 'project',
                        'news': 'news',
                        'videos': 'videos',
                        'activities': 'activities'
                    };
                    return () => VolunteerSichuan;
                }

                if (pathParts[1] === 'hotline' && pathParts[2]) {
                    const hotlinePages = {
                        'project': 'project',
                        'request-help': 'request-help',
                        'provide-help': 'provide-help'
                    };
                    return () => LeiFengHotline;
                }

                return routes[this.currentPath] || routes['/'];
            }
        },
        methods: {
            navigate(path) {
                this.currentPath = path;
                window.scrollTo(0, 0);
            }
        },
        mounted() {
            // 创建路由链接
            const routerLinks = this.$el.querySelectorAll('router-link');
            routerLinks.forEach(link => {
                const to = link.getAttribute('to');
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.navigate(to);
                });
            });
        }
    });
</script>
</body>
</html>